<template>
    <!-- 考试分析 -->
    <div class="exam-analysis-wrap">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="单场考试分析" name="first">
                <one-exam v-if="activeName == 'first'"></one-exam>
            </el-tab-pane>
            <el-tab-pane label="单个考生分析" name="second">
                <one-examinee v-if="!secondModelFirseLoad"></one-examinee>
            </el-tab-pane>
            <el-tab-pane label="单个组织部门分析" name="third">
                <one-organization v-if="!thirdModelFirseLoad"></one-organization>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import OneExam from './PageModel/OneExam'
import OneExaminee from './PageModel/OneExaminee'
import OneOrganization from './PageModel/OneOrganization'

export default {
    name: '',
    components: {
        OneExam,
        OneExaminee,
        OneOrganization
    },
    data() {
        return {
            activeName: 'first',
            secondModelFirseLoad: true, // 第二模块是否第一次加载
            thirdModelFirseLoad: true, // 第三模块是否第一次加载
        }
    },
    methods: {
        handleClick() {
            if (this.activeName == 'second' && this.secondModelFirseLoad) {
                this.secondModelFirseLoad = false
            } else if (this.activeName == 'third' && this.thirdModelFirseLoad) {
                this.thirdModelFirseLoad = false
            }
        }
    }
}
</script>
<style lang="scss">
.exam-analysis-wrap {
    h3 {
        font-size: 26px;
        color: #303133;
    }
    .model-title {
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        font-weight: bold;
        color: #446bde;
    }
    .echart-title {
        margin-bottom: 15px;
        color: #2F3444;
        font-size: 16px;
        font-weight: bold;
    }
    .echart-wrap {
        margin-top: 20px;
        padding: 0 10px; 
        width: 100%;
        height: 354px;
        padding: 20px;
        background:rgba(225,225,225,.2);
    }
    .no-data {
        position: relative;
        padding-top: 50px;
        width: 100%;
        height: 250px;
        background: url(../../assets/images/home/empty.png) center center no-repeat;
        background-size: 280px 280px;
        .no-data-text {
            position: absolute;
            top: 50%;
            margin-top: 80px;
            width: 100%;
            color: #333;
            text-align: center;
            margin-right: 140px;
            font-size: 18px;
            line-height: 30px;
            opacity: 0.6;
        }
    }
    .examinee-score-distributed-wrap {
        height: 450px;
        padding: 20px 0;
        background:rgba(225,225,225,.2);
        .echart-wrap {
            margin-top: 0;
            padding: 0 20px;
            background:rgba(225,225,225,0);
        }
    }
}
</style>